<template lang="html">
  <section class="cbafx">
    <div id="asjtj_cba">
      <div class="page_top">
        <div class="page_tool">
            <!-- <button class="b_nav"><img src="images/i_nav.png"/></button> -->
            <label for="">案件编号：</label><input class="search_item inputItem"  type="text"  placeholder="请输入" v-model='ajbh'/>
            <label for="">身份证号：</label><input class="search_item inputItem" type="text" placeholder="请输入" v-model='sfzh'/>
            <label for="">涉案手机号：</label><input class="search_item inputItem"  type="text" placeholder="请输入" v-model='sjh'/>
            <label for="">涉案车牌号：</label><input class="search_item inputItem"  type="text" placeholder="请输入" v-model='cph'/>
            <div class="btnarea">
              <button class="search_item el-button el-button--primary el-button--small" id="cbafxBth">分析</button>
              <button class="search_item el-button el-button--danger el-button--small" @click='clear'>清除</button>
            </div>
        </div>
      </div>
      <div class="page_content">
        <div class="page_time"></div>
        <div style="width:99%;margin:0 auto;clear:left;padding:5px 0px 0px 0px;">
            <div id="gx" style="width:1500px;margin:0 auto;height:800px;"></div>
        </div>
      </div>
    </div>
    <div id="goodcover"></div>
    <div id="code">
      <div class="close1"><span>描述</span><a href="javascript:void(0)" id="closebt"><img src="../../assets/img/cbafx/close.gif"></a></div>
      <div class="goodtxt">
        <table id="cbafxTab" style="width:800px;height:380px;" ></table><p id="cbafxTip"></p>
        <p><a herf='javascript:void(0);' id="cbafxMore">扩展</a><a herf='javascript:void(0);' target="_blank" id="cbafxDetail">详情</a></p>
        <input type="hidden" id="cbafxCaseCode"><input type="hidden" id="cbafxCodeValue"><input type="hidden" id="removeCodeValue">
      </div>
    </div>
  </section>
</template>

<script>
import $ from "jquery";
import { _case, _user, _timg, _phone } from "./img";
export default {
  data() {
    return {
      ajbh: "",
      sfzh: "",
      sjh: "",
      cph: ""
    };
  },
  methods: {
    clear() {
      this.ajbh = "";
      this.sfzh = "";
      this.sjh = "";
      this.cph = "";
    },
    addClickEventsToEcharts(Chart) {
      var _this = this;
      Chart.on("click", function(param) {
        var lx = param;
        var Chart = _this.$echarts.init(document.getElementById("gx"));
        var option = Chart.getOption();
        var removeCaseCode = "";
        var removeCodeValue = "";
        var tableHtml =
          "<tr><th>嫌疑人</th><th>电话号码</th><th>车牌号</th><th>案件名称</th><th>报案内容</th><th>案发地址</th></tr>";
        $("#cbafxTab").html("");
        var xyr = "";
        var dhhm = "";
        var cph = "";
        for (var i in option.series[0].data) {
          if (option.series[0].data[i].category == "案") {
            if (i == option.series[0].data.length - 1) {
              removeCaseCode += option.series[0].data[i].name;
            } else {
              removeCaseCode += option.series[0].data[i].name + ",";
            }
          } else {
            if (i == option.series[0].data.length - 1) {
              removeCodeValue += option.series[0].data[i].name;
            } else {
              removeCodeValue += option.series[0].data[i].name + ",";
            }
            if (option.series[0].data[i].category == "人") {
              if (option.series[0].data[i].value) {
                xyr += option.series[0].data[i].value + ";<br>";
              } else {
                xyr += option.series[0].data[i].name + ";<br>";
              }
            } else if (option.series[0].data[i].category == "号") {
              dhhm += option.series[0].data[i].name + ";<br>";
            } else if (option.series[0].data[i].category == "车") {
              cph += option.series[0].data[i].name + ";<br>";
            }
          }
        }
        tableHtml +=
          "<tr><td>" + xyr + "</td><td>" + dhhm + "</td><td>" + cph + "</td>";
        var category = lx.data.category;
        $("#cbafxTip").hide();
        $("#cbafxCaseCode").attr("value", removeCaseCode);
        $("#cbafxCodeValue").attr("value", lx.name);
        $("#removeCodeValue").attr("value", removeCodeValue);
        $("#cbafxTab").hide();
        $("#code").css({
          width: "200px",
          height: "70px"
        });
        $(".close1").css({
          width: "200px",
          height: "30px"
        });
        var element = "";
        var id = lx.name;
        var esSearchURL = "";
        $("#cbafxMore").show();
        $("#cbafxDetail").show();
        if (category == "案") {
          $("#cbafxTab").show();
          $("#cbafxMore").hide();
          element = "aj";
          $("#code").css({
            width: "800px",
            height: "500px"
          });
          $(".close1").css({
            width: "800px",
            height: "60px"
          });
          $.ajax({
            type: "GET",
            url: "/jqa/caseTrend/getCaseDetail",
            async: false,
            data: {
              case_code: id
            },
            success: function(data) {
              if (!data) {
                tableHtml += "<td></td><td></td><td></td></tr>";
                $("#cbafxTip").text("未找到案件详情！");
                $("#cbafxTip").show();
              } else {
                data = JSON.parse(data);
                tableHtml +=
                  "<td>" +
                  data.CASE_NAME +
                  "</td><td>" +
                  data.ZYAJ +
                  "</td><td>" +
                  data.REPORT_CASE_ADDRESS +
                  "</td></tr>";
              }
              $("#cbafxTab").html(tableHtml);
            }
          });
        }
        if (category == "人") {
          element = "ry";
        }
        if (category == "号") {
          $("#cbafxDetail").hide();
        }
        if (category == "车") {
          element = "wp";
        }
        var token = _this.getCookie("token");
        $("#cbafxDetail").attr(
          "href",
          esSearchURL +
            "?element=" +
            element +
            "&id=" +
            id +
            "&q=" +
            id +
            "&token=" +
            token
        ); //地址跳转
        $("#code").center();
        $("#goodcover").show();
        $("#code").fadeIn();
      });
    },
    getCookie(name) {
      var arr,
        reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
      if ((arr = document.cookie.match(reg))) return unescape(arr[2]);
      else return null;
    },
    gx_fun() {
      var url = location.search;
      var Request = new Object();
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
      }
      var transactCaseCode = Request["transactCaseCode"];
      var asjData = [];
      var asjLinkData = [];
      $.ajax({
        type: "GET",
        url: "/jqa/caseTrend/getCaseConnectData",
        data: {
          case_code: transactCaseCode
        },
        async: false,
        success: function(data) {
          var listData = data.asjData;
          var listLinkData = data.asjLinkData;
          if (!data) {
            return;
          } else {
            if (data.asjData.length > 0) {
              for (var i in listData) {
                var symbolObj = "";
                var valObj = "";
                if (listData[i].category == "案") {
                  symbolObj = "image://" + _case;
                  valObj = listData[i].case_name;
                }
                if (listData[i].category == "人") {
                  symbolObj = "image://" + _user;
                  valObj = listData[i].xm;
                }
                if (listData[i].category == "号") {
                  symbolObj = "image://" + _phone;
                }
                if (listData[i].category == "车") {
                  symbolObj = "image://" + _timg;
                }
                asjData.push({
                  name: listData[i].name,
                  category: listData[i].category,
                  symbol: symbolObj,
                  symbolSize: [65, 65],
                  value: valObj
                });
              }
              for (var i in listLinkData) {
                asjLinkData.push({
                  source: listLinkData[i].source,
                  target: listLinkData[i].target,
                  value: listLinkData[i].val
                });
              }
            } else {
              alert("对不起，未找到该案件的串并案关系。");
            }
          }
        }
      });
      var options = {
        title: {
          text: ""
        },
        tooltip: {
          formatter: "{b}"
        },
        animationDurationUpdate: 1500,
        animationEasingUpdate: "quinticInOut",
        label: {
          normal: {
            show: true,
            textStyle: {
              fontSize: 12
            }
          }
        },
        legend: {
          x: "center",
          data: ["案", "人", "号", "车"],
          textStyle: {
            color: "rgba(155,166,198,1)",
            fontSize: 12,
            fontWeight: "bold"
          }
        },
        series: [
          {
            type: "graph",
            layout: "force", //图的布局，'none'不采用任何布局，'circular'环形布局，'force'引导布局
            force: {
              repulsion: 1000
            },
            focusNodeAdjacency: true,
            symbol: ["roundRect"], //节点形状
            symbolSize: 45, //节点大小
            roam: true, //关系图可缩放并拖曳
            nodeScaleRatio: 0, //节点不缩放
            draggable: true, //节点可拖曳
            itemStyle: {
              normal: {
                label: {
                  formatter: function(param) {
                    if (
                      (param.data.category == "案" ||
                        param.data.category == "人") &&
                      param.data.value
                    ) {
                      return param.data.value;
                    } else {
                      return param.data.name.slice(0, 7) + "...";
                    }
                  }
                }
              }
            },
            focusNodeAdjacency: false, //突出显示鼠标所放节点及边缘
            categories: [
              {
                name: "案",
                itemStyle: {
                  normal: {
                    color: "rgba(0,102,255,.85)"
                  }
                }
              },
              {
                name: "人",
                itemStyle: {
                  normal: {
                    color: "rgba(113,129,248,.85)"
                  }
                }
              },
              {
                name: "号",
                itemStyle: {
                  normal: {
                    color: "rgba(0,185,96,.85)"
                  }
                }
              },
              {
                name: "车",
                itemStyle: {
                  normal: {
                    color: "rgba(0,233,255,.85)"
                  }
                }
              }
            ],
            label: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 12
                },
                position: "bottom"
              }
            },
            edgeLabel: {
              normal: {
                show: true,
                textStyle: {
                  fontSize: 10
                },
                formatter: "{c}"
              }
            },
            data: asjData,
            links: asjLinkData,
            lineStyle: {
              normal: {
                opacity: 0.9,
                width: 1,
                curveness: 0
              }
            }
          }
        ]
      };
      var Chart = this.$echarts.init(document.getElementById("gx"));
      Chart.setOption(options);
      this.addClickEventsToEcharts(Chart);
    }
  },
  mounted() {
    this.gx_fun();
    let _this = this;
    $("#closebt").click(function() {
      $("#code").hide();
      $("#goodcover").hide();
    });
    $("#goodcover").click(function() {
      $("#code").hide();
      $("#goodcover").hide();
    });
    jQuery.fn.center = function(loaded) {
      var obj = this,
        body_width = parseInt($(window).width()),
        body_height = parseInt($(window).height()),
        block_width = parseInt(obj.width()),
        block_height = parseInt(obj.height());
      var left_position = parseInt(
        body_width / 2 - block_width / 2 + $(window).scrollLeft()
      );
      if (body_width < block_width) {
        left_position = 0 + $(window).scrollLeft();
      }

      var top_position = parseInt(
        body_height / 2 - block_height / 2 + $(window).scrollTop()
      );
      if (body_height < block_height) {
        top_position = 0 + $(window).scrollTop();
      }

      if (!loaded) {
        obj.css({
          position: "absolute"
        });
        obj.css({
          top: ($(window).height() - $("#code").height()) * 0.5,
          left: left_position
        });
        $(window).bind("resize", function() {
          obj.center(!loaded);
        });
        $(window).bind("scroll", function() {
          obj.center(!loaded);
        });
      } else {
        obj.stop();
        obj.css({
          position: "absolute"
        });
        obj.animate(
          {
            top: top_position
          },
          200,
          "linear"
        );
      }
    };
    $("#cbafxBth").click(function() {
      var cbafx_case_code = _this.ajbh;
      var cbafx_cert_no = _this.sfzh;
      var cbafx_mobile = _this.sjh;
      var cbafx_car_no = _this.cph;
      var code_value = "";
      if (cbafx_car_no != null && cbafx_car_no != "") {
        code_value = cbafx_car_no;
      }
      if (cbafx_mobile != null && cbafx_mobile != "") {
        code_value = cbafx_mobile;
      }
      if (cbafx_cert_no != null && cbafx_cert_no != "") {
        code_value = cbafx_cert_no;
      }
      $.ajax({
        type: "GET",
        url: "/jqa/caseTrend/getCaseConnectData",
        data: {
          case_code: cbafx_case_code,
          code_value: code_value
        },
        success: function(data) {
          var listData = data.asjData;
          var listLinkData = data.asjLinkData;
          if (data.length == 0) {
            return;
          } else {
            var asjData = [];
            var asjLinkData = [];
            for (var i in listData) {
              var symbolObj = "";
              var valObj = "";
              if (listData[i].category == "案") {
                symbolObj = "image://" + _case;
                valObj = listData[i].case_name;
              }
              if (listData[i].category == "人") {
                symbolObj = "image://" + _user;
                valObj = listData[i].xm;
              }
              if (listData[i].category == "号") {
                symbolObj = "image://" + _phone;
              }
              if (listData[i].category == "车") {
                symbolObj = "image://" + _timg;
              }
              asjData.push({
                name: listData[i].name,
                category: listData[i].category,
                symbol: symbolObj,
                symbolSize: [65, 65],
                value: valObj
              });
            }
            for (var i in listLinkData) {
              asjLinkData.push({
                source: listLinkData[i].source,
                target: listLinkData[i].target,
                value: listLinkData[i].val
              });
            }
            var Chart = _this.$echarts.init(document.getElementById("gx"));
            var option = Chart.getOption();
            option.series[0].data = asjData;
            option.series[0].links = asjLinkData;
            Chart.setOption(option);
            _this.addClickEventsToEcharts(Chart);
          }
        }
      });
    });
    $("#cbafxMore").click(function() {
      var cbafxCaseCode = $("#cbafxCaseCode").val();
      var cbafxCodeValue = $("#cbafxCodeValue").val();
      var removeCodeValue = $("#removeCodeValue").val();
      $("#code").hide();
      $("#goodcover").hide();
      $.ajax({
        type: "GET",
        url: "/jqa/caseTrend/getCaseConnectData",
        data: {
          case_code: cbafxCaseCode,
          code_value: cbafxCodeValue,
          flag: "1",
          remove_code_value: removeCodeValue
        },
        success: function(data) {
          if (data) {
            var asjData = data.asjData;
            var asjLinkData = data.asjLinkData;
            var Chart = _this.$echarts.init(document.getElementById("gx"));
            var option = Chart.getOption();
            for (var i in asjData) {
              var symbolObj = "";
              var valObj = "";
              if (asjData[i].category == "案") {
                symbolObj = "image://" + _case;
                valObj = asjData[i].case_name;
              }
              if (asjData[i].category == "人") {
                symbolObj = "image://" + _user;
                valObj = asjData[i].xm;
              }
              if (asjData[i].category == "号") {
                symbolObj = "image://" + _phone;
              }
              if (asjData[i].category == "车") {
                symbolObj = "image://" + _timg;
              }
              option.series[0].data.push({
                name: asjData[i].name,
                category: asjData[i].category,
                symbol: symbolObj,
                symbolSize: [65, 65],
                value: valObj
              });
            }
            for (var i in asjLinkData) {
              option.series[0].links.push({
                source: asjLinkData[i].source,
                target: asjLinkData[i].target,
                value: asjLinkData[i].val
              });
            }
            Chart.setOption(option);
            _this.addClickEventsToEcharts(Chart);
          } else {
            return;
          }
        }
      });
    });
  }
};
</script>

<style lang="scss" scoped>
@import "./main.css";
.page_top {
  width: 94%;
  min-width: 1300px;
  background-color: #eee;
  margin: 0 auto;
  padding-top: 20px;
}
.page_tool {
  // width : 1000px;
  // margin: 0 auto;
  height: 100px;
  text-align: center;
  label {
    margin-left: 20px;
  }
  .inputItem {
    width: 200px;
    height: 26px;
  }
  .btnarea {
    margin-top: 20px;
  }
}
</style>
